<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>
	<view class="orderTrackingBox">
		<view class="topBox">
			<view class="status_bar"></view>
			<uni-nav-bar style="width: 750rpx; height: 44px;" @clickRight="showSetUp" color="#FDFDFD" :border="false" :shadow="false" background-color="#FBFBFF">
				<!-- @clickLeft="goHome" -->
				<!-- <view class="titleImg"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/logo_ctw@3x.png"></image></view> -->
				<!-- 			<view slot="left">
					<view class="leftIconBox"><uni-icons type="arrowleft" color="#000" size="18"></uni-icons></view>
				</view> -->
				<view slot="right"><uni-icons type="bars" color="#AEB0B3" size="28"></uni-icons></view>
			</uni-nav-bar>
		</view>
		<view class="zhuti" :style="{ paddingTop: topBar }">
			<!-- 标题 -->
			<view class="titleBox">
				<view class="titleBoxcenter">
					<text>{{ i18n.ctwfont1 }}</text>
				</view>
			</view>
			<view class="zhutiBigBox" :style="{ margin: isShowBox ? '' : '0 40px' }">
				<!-- 搜索 -->
				<view class="searchBox">
					<view class="searchBoxItemI">{{ numType(num) }}</view>
					<uni-easyinput
						suffixIcon="search"
						type="text"
						v-model="value"
						confirmType="search"
						@confirm="searchClickBtn"
						:placeholder="i18n.ctwfont2"
						@iconClick="searchClickBtn"
					></uni-easyinput>
				</view>
				<view v-show="!isShowBox" class="zhutiBigBoxImgL"><image style="width: 100%; height: 100%;" src="/static/icon/superAnt/Tracking-201.png" mode=""></image></view>
				<view v-show="!isShowBox" class="zhutiBigBoxImgR"><image style="width: 100%; height: 100%;" src="/static/icon/superAnt/Tracking-2012.png" mode=""></image></view>
			</view>
		</view>
		<!-- :style="{ height: imgBox }" -->
		<view class="orderTrackingBgImg" v-if="isShowBox">
			<view class="morenBox">
				<view>{{ i18n.ctwfont32 }}</view>
				<view>{{ i18n.ctwfont33 }}</view>
			</view>

			<uni-transition class="orderTrackingBgImgBottomMiFeng" :mode-class="['slide-top', 'slide-left']" :duration="1000" :show="orderTrackingBgImgBottomMiFeng">
				<view class="orderTrackingBgImgBottomMiFeng"><image style="width: 100%; height: 100%;" src="/static/icon/superAnt/Tracking-02.png" mode=""></image></view>
			</uni-transition>

			<view class="orderTrackingBgImgBottom" :style="{ bottom: isIOS ? '50px' : '84px' }">
				<image style="width: 100%; height: 100%;" src="/static/icon/superAnt/orderTrackingBgImg.png" mode=""></image>
			</view>
		</view>
		<view v-else>
			<view class="loadingBox" :style="{ height: imgBox }" v-if="loading"><uni-load-more :showText="false" color="#333" status="loading"></uni-load-more></view>
			<view class="trackingbottomBox" v-else>
				<view class="guochengBox">
					<!-- 订单号 -->
					<view class="guochengBoxTopBox">
						<view class="daochuBoxL">
							<view>{{ numType(num) }}:</view>
							<view class="daochuBoxLNum">
								<view>{{ num }}</view>
							</view>
						</view>
						<view class="daochuBoxR">
							<view>{{ $t('orderDetails.ctwfont21') }}</view>
							<view class="daochuBoxLNumTwo">
								<view>{{ selectIndex }}</view>
								<!-- @tap="guiHao" -->
								<view class="daochuBoxLNumBtnTwo" @tap="guiHao">เลือก</view>
							</view>
						</view>
					</view>
					<!-- 运输流程 -->
					<view class="stepBarItemTopBox">สถานะการขนส่ง</view>
					<view class="stepBarItem">
						<view class="stepBarP" v-for="(item, index) in guochengList" :key="item.id">
							<view class="stepBarItemBox" :style="{ width: item.id == 12 ? '45px' : '' }" :class="item.id == 12 || item.id == 14 ? 'isOkClick' : ''">
								<image style="width: 100%; height: 100%;" :src="isImgBox(item)" mode=""></image>
							</view>
							<view class="stepBarItemText" :style="{ color: isTextBox(item) }">{{ item.text }}</view>
							<view class="stepBarItemIconBox" :style="{ right: item.id == 12 ? '-68%' : '' }">
								<image style="width: 100%; height: 100%;" :src="isIconBox(item)" mode=""></image>
							</view>
						</view>
					</view>

					<!-- 物流详细流程 -->
					<scroll-view class="stepBarBottomBox" scroll-x="true" :scroll-left="leftScrollNum">
						<view class="stepBarBottomBoxBottom">
							<steps-box
								style="margin-left: 60px; padding: 20px 0;"
								@leftScroll="leftScrollNumFn"
								:options="options"
								direction="row"
								activeColor="#F77687"
								:active="orderStatusType"
								:thailandWarehouse="thailandWarehouse"
							></steps-box>
						</view>
					</scroll-view>
					<view class="pinlLine"></view>
					<view class="stepBarBottomBoxTop2">
						<view class="stepBarBottomBoxTopText">
							<view>
								<view class="">{{ i18n.ctwfont23 }}</view>
								<view style="color: #CD001B; font-size: $uni-font-size-custom-a; min-height: 14px;">{{ warehouse(warehouseCode) }}</view>
							</view>
							<view>
								<view class="">{{ i18n.ctwfont24 }}</view>
								<view style=" color: #CD001B; min-height: 14px;">{{ cabinetNumber }}</view>
							</view>
							<view>
								<view class="">{{ i18n.ctwfont25 }}</view>
								<view style="color: #CD001B; min-height: 14px; text-align: right;">{{ packetNums }}</view>
							</view>
						</view>
					</view>
					<!-- v-show="orderNumber" -->
					<view class="seeOrderDetailsBox" @tap="seeOrderDetailsBox">{{ i18n.ctwfont34 }}</view>
				</view>
				<view class="bottomBack" @tap="goHome">
					<uni-icons type="back" color="#cd001b" size="16" style="margin-right: 5px;"></uni-icons>
					<view>{{ i18n.ctwfont35 }}</view>
				</view>
			</view>
		</view>

		<!-- 设置 -->
		<uni-popup style="z-index: 999;" ref="SetUpPopup" type="center" :animation="false"><set-up-pages ref="showPopup" @closePopUp="closePopUp" /></uni-popup>
		<!-- 退出 -->
		<sign-out ref="signOutBox" />
		<!-- 详情弹出宽 -->
		<uni-popup style="z-index: 2;" ref="seeOrderDetailsBox" type="bottom" :safeArea="false" :animation="false">
			<tracking-details :heightNum="windowHeight - topBarHeight + 'px'" :cardArrList="cardArrList" @closeCardArr="closeCardArr" :isShowBar="true"></tracking-details>
		</uni-popup>
		<!-- 柜号 -->
		<uni-popup ref="guiHaoTwoPopup" type="center" :animation="false">
			<view class="guiHaoPopupBox">
				<view
					class="guiHaoPopupBoxItem"
					@tap="selectBusiness(item)"
					:class="selectIndex == item.text ? 'guiHaoPopupBoxItemBg' : ''"
					v-for="(item, index) in array"
					:key="index"
				>
					{{ item.text }}
				</view>
			</view>
		</uni-popup>
		<lb-tabbar ref="tabbar" :value="$store.state.tabActive" :animate="$store.state.animate" :placeholder="true">
			<lb-tabbar-item
				v-for="item in $store.state.tabbars"
				:key="item.pagePath"
				:name="item.pagePath"
				:icon="item.iconPath"
				:selectedIconPath="item.selectedIconPath"
				:dot="item.dot"
				:info="item.info"
				:raisede="item.raisede"
				icon-prefix="iconfont"
				@click="handleTabbarItemClick"
			>
				{{ item.text }}
			</lb-tabbar-item>
		</lb-tabbar>
	</view>
</template>
<style lang="scss" scoped>
::v-deep .uni-easyinput__content {
	min-height: 30px;
	padding: 0 5px;
	background-color: #ffffff;
	border-radius: 20px;
}
::v-deep .uni-input-placeholder {
	line-height: 30px;
}
::v-deep .content-clear-icon {
	color: #424451 !important;
	font-size: $uni-font-size-custom-g !important;
	z-index: 1;
}
::v-deep .select-picker {
	height: 20px;
}
::v-deep .placeholder {
	padding-top: 3px;
}
.orderTrackingBox {
	position: fixed;
	background-color: #fbfbff;
	width: 100%;
	height: 100%;
}

.loadingBox {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.5);
}
.titleImg {
	width: 60px;
	height: 30px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
}
.leftIconBox {
	width: 25px;
	height: 25px;
	background-color: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 15px;
}
.topBox {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	// 顶部部分
	.status_bar {
		height: var(--status-bar-height);
		background-color: #fbfbff;
		width: 100%;
	}
}
.zhuti {
	width: 100%;
	padding: 0 15px;
	box-sizing: border-box;
	background-color: #fbfbff;
	.zhutiBigBox {
		position: relative;
		background-color: #fff;
		margin-top: 15px;
		border-radius: 10px;
		padding: 20px 10px;
		box-sizing: border-box;
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
		.searchBox {
			.searchBoxItemI {
				text-align: center;
				font-size: $uni-font-size-custom-f;
				color: #484a56;
			}
		}
		.zhutiBigBoxImgL {
			position: absolute;
			left: -50px;
			top: 0;
			width: 50px;
			height: 60px;
			z-index: 0;
		}
		.zhutiBigBoxImgR {
			position: absolute;
			right: -50px;
			bottom: -35px;
			width: 70px;
			height: 80px;
			z-index: 0;
		}
	}
	.titleBox {
		margin-bottom: 5px;
		display: flex;
		justify-content: center;
		.titleBoxcenter {
			height: 30px;
			line-height: 30px;
			text-align: center;
			font-size: $uni-font-size-custom-j;
			color: #cd001b;
		}
	}
}
.orderTrackingBgImg {
	// position: relative;
	// background-color: #fbfbff;
	// width: 100%;
	// height: 100%;
	.morenBox {
		font-size: $uni-font-size-custom-f;
		color: #77838f;
		text-align: center;
		padding-top: 160rpx;
	}
	.orderTrackingBgImgBottomMiFeng {
		position: absolute;
		left: 0;
		bottom: 26%;
		width: 200px;
		height: 150px;
		transform: rotate(30deg);
		z-index: 1;
	}

	.orderTrackingBgImgBottom {
		position: absolute;
		left: 0;
		bottom: 50px;
		width: 100%;
		height: 500rpx;
	}
}
.trackingbottomBox {
	width: 100%;
	padding: 30px 10px 0 10px;
	background-color: #fbfbff;
	box-sizing: border-box;
	.bottomBack {
		height: 60px;
		line-height: 60px;
		color: #cd001b;
		font-size: $uni-font-size-custom-d;
		display: flex;
		align-items: center;
	}
	.guochengBox {
		overflow: hidden;
		padding: 20px 0;
		border-radius: 10px;
		background-color: #fff;
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
		.guochengBoxTopBox {
			padding: 0 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			border-radius: 5px;
			.daochuBoxL {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				// align-items: center;
				font-size: $uni-font-size-custom-e;
				color: #424451;
				font-weight: 700;
				.daochuBoxLNum {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #cd001b;
				}
			}
			.daochuBoxR {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				border-radius: 5px;
				box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
				padding: 5px;
				box-sizing: border-box;
				margin-left: 10px;
				.daochuBoxLNumTwo {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #cd001b;

					.daochuBoxLNumBtnTwo {
						background-color: #cd001b;
						font-size: $uni-font-size-custom-c;
						padding: 0 12px;
						border-radius: 20px;
						color: #fff;
					}
				}
			}
		}
		.stepBarItemTopBox {
			background-color: #ffedef;
			text-align: center;
			font-size: $uni-font-size-custom-d;
			margin-top: 20px;
		}
		.stepBarItem {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 13px;
			box-sizing: border-box;
			background-color: #ffedef;
			.stepBarP {
				position: relative;
				padding-top: 10px;
				box-sizing: border-box;
				height: 90px;
				.stepBarItemBox {
					width: 30px;
					height: 30px;
				}
				.isOkClick {
					width: 40px;
				}
				.stepBarItemText {
					position: absolute;
					width: 55px;
					left: 50%;
					transform: translateX(-50%);
					margin-top: 10px;
					text-align: center;
					font-size: $uni-font-size-custom-a;
					line-height: 12px;
					color: #cd001b;
					word-break: break-all; // 强制换行
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 3; // 多行在这里修改数字即可
					overflow: hidden;
					-webkit-box-orient: vertical;
				}
				.stepBarItemIconBox {
					position: absolute;
					right: -100%;
					top: 30%;
					transform: translate(-50%, -50%);
					width: 7px;
					height: 7px;
				}
			}
		}
		.stepBarBottomBox {
			background-color: #fff;
			overflow-x: scroll;
			.stepBarBottomBoxBottom {
				width: 250%;
			}
		}
		.pinlLine {
			margin: 0 60rpx;
			border-bottom: 2px solid #fddde1;
		}
		.stepBarBottomBoxTop2 {
			// height: 85px;
			line-height: 20px;
			padding: 5px 10px;
			overflow-y: scroll;
			margin-top: 30px;
			.stepBarBottomBoxTopText {
				margin-top: 5px;
				display: flex;
				justify-content: space-between;
				font-size: $uni-font-size-custom-b;
				.stepBarBottomBoxTopTextHidden {
					width: 300rpx;
					white-space: pre-line !important;
					word-break: break-all !important;
					word-wrap: break-word !important;
					// text-overflow: ellipsis;
					// display: -webkit-box;
					// -webkit-line-clamp: 4; // 多行在这里修改数字即可
					// overflow: hidden;
					// -webkit-box-orient: vertical;
				}
			}
		}
		.seeOrderDetailsBox {
			background-color: #ff576d;
			color: #fff;
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			margin-top: 10px;
			border-radius: 5px;
		}
	}
}
.guiHaoPopupBox {
	width: 500rpx;
	height: 500rpx;
	overflow-y: scroll;
	.guiHaoPopupBoxItem {
		width: 100%;
		padding: 15px 0;
		border-radius: 30px;
		color: #cbcbcb;
		background-color: #f2f2f2;
		font-size: $uni-font-size-custom-d;
		text-align: center;
		margin-bottom: 25px;
	}

	.guiHaoPopupBoxItemBg {
		color: #fff;
		background-color: #cd001b;
	}
}
</style>

<script>
import setUpPages from '@/pages/setUpPages/index.vue';
import signOut from '@/pages/setUpPages/signOut.vue'; // 退出登录
import stepsBox from '@/pages/maps/stepsBox.vue'; // 复制uni-steps
import dropdown from '@/components/drop-down/drop-down.vue';
import { getStorage } from '@/utils/setStorage.js';
import trackingDetails from '@/pages/maps/trackingDetails.vue';
import baseFont from '@/utils/baseFont.js';
// tababr
import lbTabbar from '@/pages/lb-tabbar/lb-tabbar.vue';
import lbTabbarItem from '@/pages/lb-tabbar/lb-tabbar-item.vue';
export default {
	extends: baseFont,
	data: function() {
		return {
			topBarHeight: 0, // 导航栏高度
			windowHeight: 0,
			back_k: 0,
			popupIsShow: false, // 打开设置的标识
			signOutShow: false, // 退出登录
			value: '',
			orderStatusType: '', // 运输状态
			orderFlowType: '',
			cabinetNumber: '',
			warehouseCode: '',
			packetNums: '',
			sameCounterOrder: '',
			loading: false, // 加载
			loadingTime: '', // 定时
			// options: [{ title: '', id: 6 }, { title: '', id: 5 }, { title: '', id: 4 }, { title: '', id: 3 }, { title: '', id: 2 }, { title: '', id: 1 }, { title: '', id: 0 }],
			options: [{ title: '', id: 0 }, { title: '', id: 1 }, { title: '', id: 2 }, { title: '', id: 3 }, { title: '', id: 4 }, { title: '', id: 5 }],
			num: 0,
			thailandWarehouse: '', // 到达泰国仓库地址
			url: '',
			optionsList: [],
			selectIndex: '',
			array: [],
			thirdCustomerCode: '', // 第三方代号
			customerCode: '', // 客代号
			orderNumber: '', // 快递单号
			cardArrList: {}, // 订单详情
			leftScrollNum: 0, // 滚动值
			isShowBox: true,
			orderTrackingBgImgBottomMiFeng: false
		};
	},

	onLoad(option) {
		const { num, url } = option;
		this.num = num;
		this.url = decodeURIComponent(url);
		// 拦截物理返回键
		this.goBackBox();
	},
	onUnload() {
		uni.$off('goBack_k', this.goBackBox2);
	},
	created() {
		const that = this;
		uni.getSystemInfo({
			success(res) {
				that.topBarHeight = res.statusBarHeight;
				that.windowHeight = res.windowHeight;
			}
		});
		if (this.num) {
			this.isShowBox = false;
			this.orderTrackingBgImgBottomMiFeng = false;
			this.getTracking();
		} else {
			this.isShowBox = true;
			this.orderTrackingBgImgBottomMiFeng = true;
		}
	},
	onHide() {
		this.$refs.SetUpPopup.close();
		this.popupIsShow = false;
		this.$refs.signOutBox.close();
	},
	components: { setUpPages, signOut, stepsBox, dropdown, trackingDetails, lbTabbar, lbTabbarItem },
	computed: {
		topBar() {
			let num = 0;
			num = this.topBarHeight + 44; // 44是顶部高度
			return num + 'px';
		},
		imgBox() {
			let num = 0;
			if (uni.getSystemInfoSync().platform == 'android') {
				num = this.windowHeight - (this.topBarHeight + 170); // 44是顶部高度
			} else {
				num = this.windowHeight - (this.topBarHeight + 230); // 44是顶部高度
			}
			return num + 'px';
		},
		i18n() {
			return this.$t('orderTracking');
		},
		guochengList() {
			const arr = [
				{
					id: 10,
					text: this.$t('orderTracking').ctwfont5,
					title: this.$t('orderTracking').ctwfont4,
					notImg: '/static/icon/superAnt/bz22@2x(1).png',
					selectedImg: '/static/icon/superAnt/bz22@2x.png',
					checkImg: '/static/icon/superAnt/bz22@2x(2).png'
				},
				{
					id: 11,
					text: this.$t('orderTracking').ctwfont6,
					title: this.$t('orderTracking').ctwfont4,
					notImg: '/static/icon/superAnt/unity3d@2x(9).png',
					selectedImg: '/static/icon/superAnt/unity3d@2x(8).png',
					checkImg: '/static/icon/superAnt/unity3d@2x(10).png'
				},
				{
					id: 12,
					text: this.$t('orderTracking').ctwfont7,
					title: this.$t('orderTracking').ctwfont4,
					notImg: '/static/icon/superAnt/bz23@2x(1).png',
					selectedImg: '/static/icon/superAnt/bz23@2x.png',
					checkImg: '/static/icon/superAnt/bz23@2x(2).png'
				},
				{
					id: 13,
					text: this.$t('orderTracking').ctwfont8,
					title: this.$t('orderTracking').ctwfont4,
					notImg: '/static/icon/superAnt/unity3d@2x(9).png',
					selectedImg: '/static/icon/superAnt/unity3d@2x(8).png',
					checkImg: '/static/icon/superAnt/unity3d@2x(10).png'
				},
				{
					id: 14,
					text: this.$t('orderTracking').ctwfont9,
					title: this.$t('orderTracking').ctwfont4,
					notImg: '/static/icon/superAnt/bz24@2x(1).png',
					selectedImg: '/static/icon/superAnt/bz24@2x.png',
					checkImg: '/static/icon/superAnt/bz24@2x(2).png'
				}
			];
			return arr;
		},
		// 仓库
		warehouse() {
			return function(val) {
				if (val === '018001') {
					return this.$t('orderTracking').ctwfont28;
				} else if (val === '018002') {
					return '2号仓';
				} else if (val === '018003') {
					return this.$t('orderTracking').ctwfont30;
				} else if (val === '018004') {
					return this.$t('orderTracking').ctwfont29;
				} else if (val === '018005') {
					return '自提';
				} else if (val === '018006') {
					return this.$t('orderTracking').ctwfont31;
				} else {
					return '';
				}
			};
		},
		// 判断是否订单号
		numType() {
			return function(val) {
				if (val) {
					if (val.length === 8) {
						return this.$t('orderTracking').ctwfont3;
					} else {
						return this.$t('orderTracking').ctwfont22;
					}
				} else {
					return this.$t('orderTracking').ctwfont22;
				}
			};
		},
		// 判断当前图片
		isImgBox() {
			return function(item) {
				if (this.orderFlowType == item.id) {
					return item.checkImg;
				} else if (this.orderFlowType > item.id) {
					return item.selectedImg;
				} else {
					return item.notImg;
				}
			};
		},
		// 判断当前文字
		isTextBox() {
			return function(item) {
				if (this.orderFlowType == item.id) {
					return '#CD001B';
				} else if (this.orderFlowType > item.id) {
					return '#F77F8F';
				} else {
					return '#CBCBCB';
				}
			};
		},
		// 判断当前iocn
		isIconBox() {
			return function(item) {
				if (this.orderFlowType - 1 == item.id) {
					return '/static/icon/superAnt/Fill20@2x(2).png';
				} else if (this.orderFlowType > item.id) {
					return '/static/icon/superAnt/Fill20@2x.png';
				} else {
					return '/static/icon/superAnt/Fill20@2x(1).png';
				}
			};
		},
		isIOS() {
			if (uni.getSystemInfoSync().platform == 'android') {
				return true;
			} else {
				return false;
			}
		}
	},
	methods: {
		handleTabbarItemClick(e) {
			const token = getStorage('token');
			if (token === undefined || token === null || token === '') {
				let currentRoutes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let currentRoute = currentRoutes[currentRoutes.length - 1].route; //获取当前页面路由
				let currentParam = currentRoutes[currentRoutes.length - 1].options; //获取路由参数
				// 拼接参数
				let param = '';
				for (let key in currentParam) {
					param += '?' + key + '=' + currentParam[key];
				}
				let localRoute = '/' + currentRoute + param;
				if (e.name == localRoute) {
					return false;
				} else {
					if (e.name === '/pages/businessCard/index' || e.name === '/pages/home/index') {
						// #ifdef APP-PLUS
						uni.redirectTo({
							url: e.name
						});
						// #endif
						// #ifdef H5
						this.$Router.push(e.name);
						// #endif
					} else {
						// #ifdef APP-PLUS
						uni.redirectTo({
							url: '/pages/home/index'
						});
						// #endif
						// #ifdef H5
						this.$Router.push('/pages/home/index');
						// #endif
					}
				}
			} else {
				// this.$store.state.tabActive = e.name;
				let currentRoutes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let currentRoute = currentRoutes[currentRoutes.length - 1].route; //获取当前页面路由
				let currentParam = currentRoutes[currentRoutes.length - 1].options; //获取路由参数
				// 拼接参数
				let param = '';
				for (let key in currentParam) {
					param += '?' + key + '=' + currentParam[key];
				}
				let localRoute = '/' + currentRoute + param;
				if (e.name == localRoute) {
					return false;
				} else {
					// #ifdef APP-PLUS
					uni.redirectTo({
						url: e.name
					});
					// #endif
					// #ifdef H5
					this.$Router.push(e.name);
					// #endif
				}
			}
		},
		// 返回home
		goHome() {
			if (this.url && this.url != '' && this.url != 'undefined') {
				this.isShowBox = false;
				this.orderTrackingBgImgBottomMiFeng = false;
				// #ifdef APP-PLUS
				uni.redirectTo({
					url: this.url
				});
				// #endif
				// #ifdef H5
				this.$Router.push(this.url);
				// #endif
			} else {
				this.value = '';
				this.num = '';
				this.isShowBox = true;
				this.orderTrackingBgImgBottomMiFeng = true;
			}
		},
		goBackBox() {
			// const that = this;
			uni.$on('goBack_k', this.goBackBox2);
		},
		goBackBox2(data) {
			this.back_k < 0 ? (this.back_k = 0) : (this.back_k = this.back_k);
			if (data) {
				let main = plus.android.runtimeMainActivity();
				if (this.back_k > 0) {
					this.back_k = 0;
					return main.moveTaskToBack(false);
					// return plus.runtime.quit();
				} else {
					const pages = getCurrentPages();
					if (pages.length === 1) {
						this.back_k++;
						setTimeout(() => {
							this.back_k--;
						}, 1000);
						if (this.url && this.url != '' && this.url != 'undefined') {
							this.isShowBox = false;
							this.orderTrackingBgImgBottomMiFeng = false;
							// #ifdef APP-PLUS
							uni.redirectTo({
								url: this.url
							});
							// #endif
							// #ifdef H5
							this.$Router.push(this.url);
							// #endif
						} else {
							this.value = '';
							this.num = '';
							this.isShowBox = true;
							this.orderTrackingBgImgBottomMiFeng = true;
						}
						// uni.showToast({
						// 	title: '再按一次退出应用',
						// 	icon: 'none',
						// 	duration: 1000
						// });
					}
				}
			}
		},
		// 请求
		async getTracking() {
			this.loading = true;
			this.loadingTime = setTimeout(() => {
				this.loading = false;
			}, 5000);
			const user = JSON.parse(getStorage('userconter'));
			const params = {
				billCode: this.num,
				customerCode: user.customerCode
			};
			const { data: res } = await this.$http(true, 'api/E3/orderTracking', params, 'GET');
			this.loading = false;
			clearTimeout(this.loadingTime);
			if (res.errno === 0) {
				const arr = [];
				const arr2 = [];
				if (res.data) {
					this.options = [{ title: '', id: 0 }, { title: '', id: 1 }, { title: '', id: 2 }, { title: '', id: 3 }, { title: '', id: 4 }, { title: '', id: 5 }];
					if (res.data.length > 1) {
						res.data.forEach(item => {
							if (item.cabinetNumber) {
								arr.push(item);
							}
						});
						this.optionsList = arr;
						this.optionsList.forEach((item2, index) => {
							// const obj = {
							// 	name: item2.cabinetNumber,
							// 	value: index
							// };
							const obj = {
								text: item2.cabinetNumber,
								value: index
							};
							arr2.push(obj);
						});
						this.array = arr2;
						this.selectBusiness(this.array[0]);
					} else {
						this.cabinetNumber = res.data[0].cabinetNumber;
						this.warehouseCode = res.data[0].warehouseCode;
						this.packetNums = res.data[0].packetNums;
						this.thailandWarehouse = res.data[0].thailandWarehouse;
						this.sameCounterOrder = res.data[0].sameCounterOrder.length >= 1 ? res.data[0].sameCounterOrder.join(', ') : '';
						// this.orderStatusType = res.data[0].orderStatusType == 15 ? 3 : res.data[0].orderStatusType;
						this.orderFlowType = res.data[0].orderFlowType;
						if (res.data[0].conveyance === 'BY SEA') {
							this.orderStatusType = this.chuliYun(res.data[0].orderStatusType);
							this.options[0].title = res.data[0].orderTime;
							this.options[1].title = res.data[0].warehouseReceivedTime;
							this.options[2].title = res.data[0].chineseListingTime;
							this.options[3].title = res.data[0].havenDate;
							// this.options[4].title = res.data[0].arriveLaoTime;
							this.options[4].title = res.data[0].arriveThaiStorehouseTime;
							this.options[5].title = res.data[0].customerSignTime;
						} else {
							this.orderStatusType = res.data[0].orderStatusType == 15 ? 3 : res.data[0].orderStatusType;
							this.options[0].title = res.data[0].orderTime;
							this.options[1].title = res.data[0].warehouseReceivedTime;
							this.options[2].title = res.data[0].chineseListingTime;
							this.options[3].title = res.data[0].arriveVietnamTime;
							this.options[4].title = res.data[0].arriveLaoTime;
							this.options[5].title = res.data[0].arriveThaiStorehouseTime;
							const obj = {
								id: 6,
								title: res.data[0].customerSignTime
							};
							this.options.push(obj);
							// this.options[6].title = res.data[0].customerSignTime;
						}
						this.thirdCustomerCode = res.data[0].thirdCustomerCode;
						this.customerCode = res.data[0].customerCode;
						this.orderNumber = res.data[0].orderNumber;
						if (res.data[0].cabinetNumber) {
							this.array = [
								{
									text: res.data[0].cabinetNumber,
									value: 0
								}
							];
							this.optionsList = [res.data[0]];
							this.selectIndex = this.array[0].text;
						}
					}
				} else {
					this.orderStatusType = ''; // 运输状态
					this.orderFlowType = '';
					this.cabinetNumber = '';
					this.warehouseCode = '';
					this.packetNums = '';
					this.sameCounterOrder = '';
					this.thirdCustomerCode = '';
					this.orderNumber = '';
					this.customerCode = '';
					this.options = [{ title: '', id: 0 }, { title: '', id: 1 }, { title: '', id: 2 }, { title: '', id: 3 }, { title: '', id: 4 }, { title: '', id: 5 }];
					uni.showToast({
						title: this.$t('orderTracking').ctwfont21,
						icon: 'none',
						position: 'top'
					});
				}
				// this.orderStatusType = res.data.orderStatusType;
				// this.orderFlowType = res.data.orderFlowType;
				// this.options[0].title = res.data.orderTime;
				// this.options[1].title = res.data.warehouseReceivedTime;
				// this.options[2].title = res.data.chineseListingTime;
				// this.options[3].title = res.data.arriveVietnamTime;
				// this.options[4].title = res.data.arriveLaoTime;
				// this.options[5].title = res.data.arriveThaiStorehouseTime;
				// this.options[6].title = res.data.customerSignTime;
				// this.options[6].title = res.data.orderTime ? this.formatDate(res.data.orderTime) : res.data.orderTime;
				// this.options[5].title = res.data.warehouseReceivedTime ? this.formatDate(res.data.warehouseReceivedTime) : res.data.warehouseReceivedTime;
				// this.options[4].title = res.data.chineseListingTime ? this.formatDate(res.data.chineseListingTime) : res.data.chineseListingTime;
				// this.options[3].title = res.data.arriveVietnamTime ? this.formatDate(res.data.arriveVietnamTime) : res.data.arriveVietnamTime;
				// this.options[2].title = res.data.arriveLaoTime ? this.formatDate(res.data.arriveLaoTime) : res.data.arriveLaoTime;
				// this.options[1].title = res.data.arriveThaiStorehouseTime ? this.formatDate(res.data.arriveThaiStorehouseTime) : res.data.arriveThaiStorehouseTime;
				// this.options[0].title = res.data.customerSignTime ? this.formatDate(res.data.customerSignTime) : res.data.customerSignTime;
			} else {
				this.options = [{ title: '', id: 0 }, { title: '', id: 1 }, { title: '', id: 2 }, { title: '', id: 3 }, { title: '', id: 4 }, { title: '', id: 5 }];
				this.orderStatusType = ''; // 运输状态
				this.orderFlowType = '';
				this.cabinetNumber = '';
				this.warehouseCode = '';
				this.packetNums = '';
				this.sameCounterOrder = '';
				uni.showToast({
					title: res.errmsg,
					icon: 'none',
					position: 'top'
				});
			}
		},
		// 柜号选择
		selectBusiness(item) {
			var e = 0;
			if (this.selectIndex != item.text) {
				this.$refs.guiHaoTwoPopup.close();
				this.selectIndex = item.text;
				e = item.value;
				this.options = [{ title: '', id: 0 }, { title: '', id: 1 }, { title: '', id: 2 }, { title: '', id: 3 }, { title: '', id: 4 }, { title: '', id: 5 }];
				this.cabinetNumber = this.optionsList[e].cabinetNumber;
				this.warehouseCode = this.optionsList[e].warehouseCode;
				this.packetNums = this.optionsList[e].packetNums;
				this.sameCounterOrder = this.optionsList[e].sameCounterOrder.length >= 1 ? this.optionsList[e].sameCounterOrder.join(', ') : '';
				// this.orderStatusType = this.optionsList[e].orderStatusType == 15 ? 3 : this.optionsList[e].orderStatusType;
				this.orderFlowType = this.optionsList[e].orderFlowType;
				this.thailandWarehouse = this.optionsList[e].thailandWarehouse;
				if (this.optionsList[e].conveyance === 'BY SEA') {
					this.orderStatusType = this.chuliYun(this.optionsList[e].orderStatusType);
					this.options[0].title = this.optionsList[e].orderTime;
					this.options[1].title = this.optionsList[e].warehouseReceivedTime;
					this.options[2].title = this.optionsList[e].chineseListingTime;
					this.options[3].title = this.optionsList[e].havenDate;
					// this.options[4].title = this.optionsList[e].arriveLaoTime;
					this.options[4].title = this.optionsList[e].arriveThaiStorehouseTime;
					this.options[5].title = this.optionsList[e].customerSignTime;
				} else {
					this.orderStatusType = this.optionsList[e].orderStatusType == 15 ? 3 : this.optionsList[e].orderStatusType;
					this.options[0].title = this.optionsList[e].orderTime;
					this.options[1].title = this.optionsList[e].warehouseReceivedTime;
					this.options[2].title = this.optionsList[e].chineseListingTime;
					this.options[3].title = this.optionsList[e].arriveVietnamTime;
					this.options[4].title = this.optionsList[e].arriveLaoTime;
					this.options[5].title = this.optionsList[e].arriveThaiStorehouseTime;
					const obj = {
						id: 6,
						title: this.optionsList[e].customerSignTime
					};
					this.options.push(obj);
					this.thirdCustomerCode = this.optionsList[e].thirdCustomerCode;
					this.customerCode = this.optionsList[e].customerCode;
					this.orderNumber = this.optionsList[e].orderNumber;
					// this.options[6].title = this.optionsList[e].customerSignTime;
				}
			}
		},
		chuliYun(val) {
			if (val == 15) {
				return 3;
			} else if (val == 5) {
				return val - 1;
			} else if (val == 6) {
				return val - 1;
			} else {
				return val;
			}
		},
		// 时间处理
		formatDate(value) {
			switch (uni.getSystemInfoSync().platform) {
				case 'android':
					const dt = new Date(value);
					const y = dt.getFullYear();
					const m = (dt.getMonth() + 1 + '').padStart(2, 0);
					const d = (dt.getDate() + '').padStart(2, 0);
					return `${y}-${m}-${d}`;
					break;
				case 'ios':
					var reg = new RegExp('-', 'g');
					const dt2 = new Date(value.replace(reg, '/'));
					const y2 = dt2.getFullYear();
					const m2 = (dt2.getMonth() + 1 + '').padStart(2, 0);
					const d2 = (dt2.getDate() + '').padStart(2, 0);
					console.log(`${y2}-${m2}-${d2}`);
					return `${y2}-${m2}-${d2}`;
					break;
			}
		},
		// 打开设置
		showSetUp() {
			this.$refs.SetUpPopup.open('right');
			this.popupIsShow = true;
		},
		// 关闭设置
		closePopUp(val) {
			if (val) {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
			} else {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
				this.$refs.signOutBox.open();
				this.signOutShow = true;
			}
		},
		// 搜索
		searchClickBtn(e) {
			if (this.value) {
				this.isShowBox = false;
				this.orderTrackingBgImgBottomMiFeng = false;
				this.num = this.value;
				this.getTracking();
			} else {
				uni.showToast({
					title: this.$t('orderTracking').ctwfont20,
					icon: 'none',
					position: 'top'
				});
			}
		},
		// 获取订单详情
		async seeOrderDetailsBox() {
			const user = JSON.parse(getStorage('userconter'));
			const date = this.options[0].title;
			const upDate = date
				.split('-')
				.reverse()
				.join('-');
			const params = {
				orderType: 0,
				createCustomerCode: user.customerCode,
				customerCode: user.customerCode,
				page: 1,
				limit: 1,
				orderNumber: this.num,
				beginDate: upDate,
				endDate: upDate
			};
			const { data: res } = await this.$http(true, 'api/E3/orderList', params, 'GET');
			if (res.errno === 0 && res.data) {
				if (res.data.list[0].infoDetails.length <= 0) {
					res.data.list[0].infoDetails = [
						{
							orderItemNo: '',
							cargoDetails: '',
							advanceReceiveQuantity: '',
							advanceReceiveAmount: '',
							actualQuantity: '',
							actualAmount: '',
							unitPrice: ''
						}
					];
				}
				this.cardArrList = res.data.list[0];
				this.$refs.seeOrderDetailsBox.open();
				// this.$refs.seeOrderDetailsBox.close(); // 关闭详情弹框
			} else {
				uni.showToast({
					title: res.errmsg,
					icon: 'none',
					position: 'top'
				});
			}
		},
		// 关闭详情
		closeCardArr(e) {
			this.$refs.seeOrderDetailsBox.close(); // 关闭详情弹框
		},
		// 滚动位置
		leftScrollNumFn(e) {
			if (e <= 0) {
				this.leftScrollNum = 0;
			} else {
				this.leftScrollNum = e;
			}
		},
		guiHao() {
			if (this.array.length > 0 && this.selectIndex) {
				this.$refs.guiHaoTwoPopup.open();
			}
		}
	}
};
</script>
